<!-- 首页 -->
<template>
  <div class="flex flex-col gap-4">
    <el-card shadow="hover">
      <div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="flex flex-col gap-4 items-center justify-center">
          <p class="font-sans text-xl">
            你好! {{ user && user.nickName ? user.nickName : "用户" }}
          </p>
          <p class="text-gray-400">
            Today：{{ randomSetence ? randomSetence : "今日没有了" }}
          </p>
        </div>
        <div class="items-center justify-center">
          <iframe
            width="500"
            height="150"
            src="https://i.tianqi.com/?c=code&a=getcode&id=48&num=6&icon=1"
            frameborder="0"
          ></iframe>
        </div>
      </div>
    </el-card>

    <el-card shadow="hover">
      <div
        class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 items-center justify-around rounded-lg text-lg"
      >
        <div
          class="bg-teal-300 text-white p-2 rounded text-center flex flex-row"
        >
          <div class="basis-1/2 flex flex-col items-center justify-center">
            <img
              src="@/assets/icons/svg/material.svg"
              style="width: 30px; height: 30px"
            />
            <el-text class="mx-1" text-black>素材数量</el-text>
          </div>
          <div class="basis-1/2 flex items-center justify-center text-black">
            <el-statistic :value="outputValue" />
          </div>
        </div>
        <div
          class="text-center bg-sky-400 text-white p-2 rounded flex flex-row"
        >
          <div class="basis-1/2 flex flex-col items-center justify-center">
            <img
              src="@/assets/icons/svg/user.svg"
              style="width: 30px; height: 30px"
            />
            <el-text class="mx-1" text-black>用户数量</el-text>
          </div>
          <div class="basis-1/2 flex items-center justify-center text-black">
            {{ pageData.userCount }}
          </div>
        </div>
        <div class="text-center bg-amber-400 rounded flex flex-row p-2">
          <div class="basis-1/2 flex flex-col items-center justify-center">
            <img
              src="@/assets/icons/svg/materialType.svg"
              style="width: 30px; height: 30px"
            />
            <el-text class="mx-1" text-black>素材分类</el-text>
          </div>
          <div class="basis-1/2 flex items-center justify-center text-black">
            {{ pageData.materialTypeCount }}
          </div>
        </div>
        <div class="text-center bg-green-400 rounded flex flex-row p-2">
          <div class="basis-1/2 flex flex-col items-center justify-center">
            <img
              src="@/assets/icons/svg/upload.svg"
              style="width: 30px; height: 30px"
            />
            <el-text class="mx-1" text-black>已上传</el-text>
          </div>
          <div class="basis-1/2 flex items-center justify-center text-black">
            {{ pageData.uploadCount }}
          </div>
        </div>
      </div>
    </el-card>

    <div
      class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 items-center justify-around rounded-lg text-lg"
    >
      <el-card shadow="hover">
        <div class="chart" ref="chart">图表</div>
      </el-card>

      <div>
        <el-card shadow="hover">
          <template #header>
            <div class="flex flex-row items-center justify-between">
              <div class="flex flex-row gap-1">
                <img
                  src="@/assets/icons/svg/notice.svg"
                  style="width: 30px; height: 30px"
                />
                公告
              </div>
              <el-text
                class="mx-1 more"
                type="primary"
                size="large"
                @click="handleClick()"
                >更多</el-text
              >
            </div>
          </template>
          <ul>
            <li
              class="announcement-list"
              v-for="(item, index) in announcements"
              :key="index"
            >
              <el-popover
                :title="item.title"
                :width="400"
                trigger="hover"
                :content="item.content"
              >
                <template #reference>
                  <div class="announcement-item">
                    <span class="announcement-title">{{ item.title }}</span>
                    <span class="announcement-date">{{ item.updateTime }}</span>
                  </div>
                </template>
              </el-popover>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  computed,
  onMounted,
  provide,
  onBeforeUnmount,
  toRefs,
  inject,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import { getUploadHistoryCount } from "@/api/uploadHistory";
import { useTransition } from "@vueuse/core";
import { getStatistics } from "@/api/page/home.js";
import { getXcxNoticeList } from "@/api/page/notice.js";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";

// 注入对象
const user = inject("userInfo");

// 路径参数
const route = useRoute();
//  路由
const router = useRouter();

// 图表数据
const chartData = reactive({
  xAxisData: [],
  seriesData: [],
});

const chart = ref(null);
let chartInstance;
// 随机语句
const randomSetence = ref("");
// 统计数据
const materialCount = ref(0);
const pageData = reactive({
  uploadCount: 0,
  userCount: 0,
  materialTypeCount: 0,
});
// 动态数据
const outputValue = useTransition(materialCount, {
  duration: 1500,
});

// 公告数据
const announcements = ref([
  {
    title: "Spring Boot 3.0.0 首dafaffagvs",
    date: "2024-01-01",
  },
  {
    title: "Oracle 推出 JDK 8 的...",
    date: "2024-01-01",
  },
  {
    title: "Spring Framework 6.0...",
    date: "2024-01-01",
  },
  {
    title: "Windows Terminal 正...",
    date: "2024-01-01",
  },
  {
    title: "TypeScript 诞生 10 周年",
    date: "2024-01-01",
  },
  {
    title: "JetBrains Fleet 公测，...",
    date: "2024-01-01",
  },
]);

const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

onMounted(() => {
  // 获取chart数据
  getChartData();
  // 获取公告数据
  getNotice();
  // 获取天气信息
  getWeather();
  // 获取统计数据
  getStatisticsData();
  // 获取随机语句
  getRandomSentence();
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
  window.removeEventListener("resize", handleResize);
});

// 获取统计数据
const getStatisticsData = () => {
  getStatistics().then((res) => {
    if (res.code === 200) {
      materialCount.value = res.materialSize;
      pageData.uploadCount = res.uploadHistorySize;
      pageData.userCount = res.userSize;
      pageData.materialTypeCount = res.materialTypeSize;
    }
  });
};

// 获取随机语句
const getRandomSentence = () => {
  axios.get("https://v1.hitokoto.cn/").then((res) => {
    randomSetence.value = res.data.hitokoto;
  });
};

// function initChart() {
//   const myChart = echarts.init(chart.value);
//   //  对象数组格式的数据
//   const option = {
//     title: {
//       text: "素材上传趋势",
//       subtext: "最近四月",
//     },
//     tooltip: {
//       trigger: "axis",
//       axisPointer: {
//         type: "shadow",
//       },
//     },
//     grid: {
//       left: "3%",
//       right: "4%",
//       bottom: "3%",
//       containLabel: true,
//     },
//     xAxis: [
//       {
//         type: "category",
//         data: chartData.xAxisData,
//         axisTick: {
//           alignWithLabel: true,
//         },
//       },
//     ],
//     yAxis: [
//       {
//         type: "value",
//       },
//     ],
//     series: [
//       {
//         name: "Direct",
//         type: "bar",
//         barWidth: "60%",
//         data: chartData.seriesData,
//       },
//     ],
//   };

//   myChart.setOption(option);
//   window.addEventListener("resize", handleResize);
//   return myChart;
// }

// 获取图表数据

const getChartData = () => {
  getUploadHistoryCount()
    .then((result) => {
      if (result.code == 200) {
        chartData.value = result.data;
        console.log("chartData:", chartData.value);
        // 初始化图表
        chartInstance = echarts.init(chart.value);
        //  对象数组格式的数据
        const option = {
          title: {
            text: "素材上传趋势",
            subtext: "最近几个月",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: chartData.value.map((item) => item.month),
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "数量",
              type: "bar",
              barWidth: "60%",
              data: chartData.value.map((item) => item.count),
            },
          ],
        };
        chartInstance.setOption(option);
        window.addEventListener("resize", handleResize);
      }
    })
    .catch((err) => {});
};

// 获取天气信息
const getWeather = () => {};

// 获取公告数据
const getNotice = () => {
  getXcxNoticeList({
    pageNum: 1,
    pageSize: 10,
  }).then((res) => {
    if (res.code === 200) {
      announcements.value = res.rows;
    }
  });
};

// 更多公告
const handleClick = () => {
  console.log("click");
  router.push({
    path: "/page/home/notice",
  });
};
</script>

<style lang="scss" scoped>
.chart {
  height: 300px;
  width: 100%;
}
/* 覆盖 el-card 内的 ul 样式 */
::v-deep .el-card__body ul {
  /* 显示默认圆点 */
  list-style-type: disc;
  /* 保留缩进 */
  padding-left: 20px;
}

.more {
  cursor: pointer;
}

.announcement-list {
  list-style-type: disc;
  padding-left: 20px;
  color: #aaaaaa; /* 设置字体颜色为浅灰色 */

  &::marker {
    color: #aaaaaa; /* 设置圆点颜色为浅灰色 */
  }

  .announcement-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .announcement-title {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 10px;
    }

    .announcement-date {
      flex-shrink: 0;
    }
    &:hover {
      color: #000000; /* 鼠标悬停时字体变为黑色 */
    }
  }
}
</style>
